<template>
	<view>
		<u-navbar :is-back="true" :back-icon-color="vuex_titleColor" :title="title" :title-color="vuex_titleColor" :background="vuex_navBackground"></u-navbar>
		<view class="u-page">
			<!-- 所有内容的容器-->
			<!-- #ifdef H5 -->
				<l-painter v-show="isShowPainter"  :isRenderImage="true" :isH5PathToBase64="true" :board="base" @success="onImgOK" @fail="onImgFail"/>
				<IMG v-show="!isShowPainter"  :src="path" style="width: 100%; height: 100%; display: block;"></IMG>
			<!-- #endif -->
			<!-- #ifndef H5 -->
				<l-painter :isRenderImage="true" :isH5PathToBase64="true" :board="base" @success="onImgOK" @fail="onImgFail"/>
			<!-- #endif -->
			<view style="margin-top: 5rpx;">
				<!-- #ifdef H5 -->
					<view style="text-align: center;margin-top: 15rpx; ">长按保存图片</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
					<u-button @click="saveImage()">保存图片</u-button>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				path: '',
				isShowPainter: true,
				base: {
					width: '750rpx',
					height: '1114rpx',
					background: '#F6F7FB',
					views: [{
							type: 'view',
							css: {
								left: '40rpx',
								top: '144rpx',
								background: '#fff',
								radius: '16rpx',
								width: '670rpx',
								height: '930rpx',
								shadow: '0 20rpx 48rpx rgba(0,0,0,.05)'
							}
						},
						{
							type: 'image',
							src: 'https://p.ssl.qhimg.com/d/inn/0444533a/Snip20160525_6.png',
							mode: 'widthFix',
							css: {
								left: '40rpx',
								top: '40rpx',
								width: '84rpx',
								height: '84rpx',
								radius: '50%',
								color: '#999'
							}
						},
						{
							type: 'text',
							text: '隔壁老王',
							css: {
								color: '#333',
								left: '144rpx',
								top: '40rpx',
								fontSize: '32rpx',
								fontWeight: 'bold'
							}
						},
						{
							type: 'text',
							text: '为您挑选了一个好物',
							css: {
								color: '#666',
								left: '144rpx',
								top: '90rpx',
								fontSize: '24rpx'
							}
						},
						{
							type: 'image',
							src: 'https://p.ssl.qhimg.com/d/inn/0444533a/Snip20160525_6.png',
							mode: 'widthFix',
							css: {
								left: '72rpx',
								top: '176rpx',
								width: '606rpx',
								height: '606rpx',
								radius: '12rpx'
							}
						},
						{
							type: 'text',
							text: '￥39.90',
							css: {
								color: '#FF0000',
								left: '66rpx',
								top: '812rpx',
								fontSize: '56rpx',
								fontWeight: 'bold'
							}
						},
						{
							type: 'text',
							text: '360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝',
							css: {
								maxLines: 2,
								width: '396rpx',
								color: '#333',
								left: '72rpx',
								top: '948rpx',
								fontSize: '36rpx',
								lineHeight: '50rpx'
							}
						},
						{
							type: 'image',
							src: 'https://p.ssl.qhimg.com/d/inn/0444533a/Snip20160525_6.png',
							mode: 'widthFix',
							css: {
								left: '500rpx',
								top: '864rpx',
								width: '178rpx',
								height: '178rpx'
							}
						}
					]
				}
			}
		},
		computed: {
			title() {
				return '生成海报'
			}
		},
		onLoad() {

		},
		methods: {
			onImgFail(res) {
				console.log("onImgFail:" + res.error)
			},
			onImgOK(res) {
				console.log("onImgOK:" + res)
				this.path = res;
				this.isShowPainter = false;
			},
			saveImage() {
				uni.saveImageToPhotosAlbum({
					filePath: this.path,
					success(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000
						})
					}
				})
			},
		}
	}
</script>

<style>
</style>
